<template>
    <div>
        <el-card class="!border-none" shadow="never">
            <el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
                <el-form-item label="创建时间">
					<daterange-picker
						v-model:startTime="queryParams.start_time"
						v-model:endTime="queryParams.end_time"
                        type="daterange"
                        valueFormat="YYYY-MM-DD"
					/>
				</el-form-item>
                <el-form-item>
					<el-button type="primary" @click="resetPage">查询</el-button>
					<el-button @click="resetParams">重置</el-button>
				</el-form-item>
            </el-form>
        </el-card>
        <!-- 表格信息 -->
		<el-card class="!border-none" shadow="never">
            <el-table size="large" v-loading="loading" :data="list">
                <el-table-column label="日期" prop="date" min-width="220">
                    <template #default="{ row }">
                        <span v-if="queryParams.start_time">
                            {{ queryParams.start_time }} 至 {{ queryParams.end_time }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column :label="`城市(${list.length})`" prop="city_name" min-width="180" />
                <el-table-column :label="`需求发布数(${total.total})`" sortable prop="total" min-width="180" />
                <el-table-column :label="`需求通知率`" sortable prop="channel_rate" min-width="180" />
                <el-table-column :label="`渠道通知数(${total.channel_count})`" sortable prop="channel_count" min-width="180" />
                <el-table-column :label="`渠道查看率`" sortable prop="read_channel_rate" min-width="180" />
                <el-table-column :label="`渠道查看数(${total.read_channel_count})`" sortable prop="read_channel_count" min-width="180" />
                <el-table-column :label="`渠道对单率`" sortable prop="duidan_rate" min-width="180" />
                <el-table-column :label="`渠道对单数(${total.duidan_count})`" sortable  prop="duidan_count" min-width="180" />
                <el-table-column :label="`发起合作率`" sortable prop="hezuo_rate" min-width="180" />
                <el-table-column :label="`发起合作数(${total.hezuo_count})`" sortable prop="hezuo_count" min-width="180" />
                <el-table-column :label="`确认合作率`" sortable prop="quren_hezuo_rate" min-width="180" />
                <el-table-column :label="`确认合作数(${total.quren_hezuo_count})`" sortable prop="quren_hezuo_count" min-width="180" />
                <el-table-column :label="`合作单渠道费(${total.channel_price})`" sortable prop="channel_price" min-width="200" />
                <el-table-column :label="`平台抽佣金额(${total.platform_price})`" sortable prop="platform_price" min-width="180" />
                

            </el-table>
        </el-card>
    </div>
</template>
<script lang="ts" setup name="demandListsSta">
    import {demandStatistics } from '@/api/demand/lists';
    import { usePaging } from '@/hooks/usePaging';

    let queryParams = reactive({
        start_time: '',
        end_time: '',
    });
    const resetPage = () => {
        getLists()
    }
    const resetParams = () => {
        queryParams.start_time = '';
        queryParams.end_time = '';
        getLists()
    }
    const loading = ref(true)
    const list = ref([])
    const total = ref({
        total: '',
        channel_count: '',
        read_channel_count: '',
        duidan_count: '',
        hezuo_count: '',
        quren_hezuo_count: '',
        channel_price: '',
        platform_price: '',

    })
    const getLists = async () => {
        loading.value = true;
        const res = await demandStatistics(queryParams);
        console.log(res)
        loading.value = false;
        list.value = res.list;
        total.value = res.total;
    }

    getLists()
</script>